<template>
<div class="zhuce">
		<div id="toubu">
			<div id="toubuinfo">
				<a href="tianmao.html"><img src="../assets/img/ys/denglutoubu.png"/></a>				
			</div>				
		</div>
		<div id="content">
			<div id="contentin">
				<img src="../assets/img/ys/beij2.jpg">
				<div class="erweima clearfix">				
						<div class="shaoma">免费注册</div>
						<form action="/login2" method="post">
							<input type="text" @keyup="change($event.target.value)" class="user gonggong uname" placeholder="会员名/邮箱/手机号" required autocomplete="off">
								<div class="wrap ur"><i class="iconfont icon-user"></i></div>
                                <div class="ts">{{m1}}</div>
							<input type="password" @keyup="cpwd($event.target.value)" class="pword gonggong pwd" placeholder="请输入6位以上的密码" required autocomplete="off">
								<div class="wrap pw"><i class="iconfont icon-suo1"></i></div>
                                <div class="ts">{{m2}}</div>
                            <input type="password" @keyup="cnpwd($event.target.value)" class="pword gonggong newpwd" placeholder="两次密码保持一致" required autocomplete="off">
								<div class="wrap pw2"><i class="iconfont icon-suo1"></i></div>
                                <div class="ts">{{m3}}</div>
                            <input type="text" ref="code" class="svg code"  @keyup="codema($event.target.value)" placeholder="请输入验证码" required autocomplete="off">
                                <div class="svg-yzm"><img src="/api/captcha"></div>
								<div class="ts">{{m4}}</div>
							<input type="button" id="bnt" value="注册" class="gonggong" @click="zhuce">
						</form>						
						<div class="denglu">
							<a>忘记密码</a>
							<a>忘记会员名</a>
							<a href="http://127.0.0.1:8080/tianmao#/login">已有账号</a>
						</div>
				</div>
			</div>			
		</div>	
		<div id="foot">
			<div id="footinfo" class="clearfix">
				<ul class="lianjie clearfix">
					<li><a href="">关于天猫</a></li>
					<li><a href="">帮助中心</a></li>
					<li><a href="">开放平台</a></li>
					<li><a href="">诚聘英才</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">网站合作</a></li>
					<li><a href="">法律声明</a></li>
					<li><a href="">隐私权政策</a></li>
					<li><a href="">知识产权</a></li>
					<li><a href="">廉政举报</a></li>
				</ul>
				<ul class="lianjie clearfix">
				   <li><a href="">阿里巴巴集团</a></li>
				   <li><a href="">淘宝网</a></li>
				   <li><a href="">天猫</a></li>
				   <li><a href="">聚划算</a></li>
				   <li><a href="">全球速卖通</a></li>
				   <li><a href="">阿里巴巴国际交易市场</a></li>
				   <li><a href="">1688</a></li>
				   <li><a href="">阿里妈妈</a></li>
				   <li><a href="">飞猪</a></li>
				   <li><a href="">阿里云计算</a></li>
				   <li><a href="">AliOS</a></li>
				   <li><a href="">阿里通信</a></li>
				   <li><a href="">万网</a></li>
				   <li><a href="">高德</a></li>
				   <li><a href="">UC</a></li>
				   <li><a href="">友盟</a></li>
				   <li><a href="">虾米</a></li>
				   <li><a href="">钉钉</a></li>
				   <li><a href="">支付宝</a></li>
				</ul>
				<div class="lianjie-foot">
					增值电信业务经营许可证：<a href="">浙B2-20110446</a>
					网络文化经营许可证：<a href="">浙网文[2015]0295-065号</a>
					<a href="">12318举报</a>
					<a href="">出版物网络交易平台服务经营备案证： 新出发浙备字第001号</a>				
					互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com
					互联网药品信息服务资质证书编号：<a>浙-（经营性）-2017-0005</a>
					<a href=""><img src="../assets/img/ys/jc.png">浙公网安备 33010002000120号</a><br>
					（浙）网械平台备字[2018]第00002号<br>
					<span>© 2003-2018 TMALL.COM 版权所有</span>
				</div>
			</div>
		</div> 
</div>
</template>
<script>
export default {
	data(){
		return{
			m1:'',
			m2:'',
			m3:'',
			m4:'',
			uname:'',
			pwd:'',
			newpwd:'',
			code:'',
			captcha:'/api/captcha',
		}
	},
	methods:{
		zhuce(){
			if(this.uname==''||this.pwd==""||this.newpwd==""||this.code==''){
				this.$toast({
					message:'请输入完整信息',
					duration:2000
				})
				return false
			}
			if(this.m1=='用户名被注册了'){
				this.$toast({
							message:'用户名被注册了',
							duration:2000
						})
						return false
			}
			var _this=this
			axios.post('/api/zhuce',{uname:this.uname,pwd:this.pwd,newpwd:this.newpwd,code:this.code}).then((data)=>{
				if(data.data.num){
					if(data.data.num==2){
						this.$toast({
							message:'验证码错误',
							duration:2000
						})
						return false;
					}else{	
						this.$toast({
							message:'注册成功',
							duration:1500
						}),
						setTimeout(function(){
							_this.$router.push('/')
						},1500)
							}
				}else{
					this.$toast({
						message:'注册失败请重新注册',
						duration:2000
					})
				}				
			})
		},
		change(val){
			if(val==''){
				this.m1='请输入用户名'
			}else{
				if(this.uname.length>5){
					this.m1=''
				}else{
					this.m1='用户名要大于5位'
				}
			}
			this.uname=val
			axios.post('/api/cx',{uname:val}).then((data)=>{
				if(!data.data.num){
					this.m1='用户名被注册了'
				}else{
					this.m2=''
				}
			})
		},
		cpwd(val){
			this.pwd=val
            if(this.pwd==""){
                this.m2="密码不能为空"
            }else{
				if(this.pwd.length>5){
					this.m2=''
				}else{
					this.m2='密码要大于5位数'
				}
			}
        },
        cnpwd(val,val2){
			var val=document.getElementsByClassName('pwd')[0].value
			var val2=document.getElementsByClassName('newpwd')[0].value
			this.pwd=val
			this.newpwd=val2
			if(this.newpwd==""){
				this.m3="密码不能为空"
			}else{
				if(this.pwd!=this.newpwd){
                	this.m3="两次密码不一致"
            	}else{
                	this.m3=""
            	}
			}   
        },
        codema(val){
			this.code=val
            if(this.code==""){
                this.m4="验证码不能为空"
            }else{
				this.m4=''
			}
		}
	}
}
</script>

<style>
/* /-------------------------------------------/  */
.svg-yzm{
    cursor: pointer;
    position: absolute;
    right: 40px;
    top:288px;
}
.svg{
 width: 120px;
 height: 40px;
 margin:10px 25px;
 text-indent: 15px;
}
.ts{
    display: inline-block;
    line-height: 14px;
    width: 300px;
    font-size: 14px;
    color: #ff0036;
    margin-left: 25px;
}
/* /----------------------------------------/  */
*{
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h3,em{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
}
.w1230{
	width: 1230px;
}
h1,h2,h3{
	font-weight: normal;
}
#toubu{
	width: 1190px;
	height: 88px;
	margin: 0 auto;
	padding: 22px 0;
}
#toubuinfo{
	margin-top: 8px;
	width: 1190px;
	height: 44px;
}
#toubuinfo img{
	width: 190px;
	height: 27px;
}
#content{
	background-color:#FF8302;
	width:100%;
	height: 600px;
}
#contentin{
	position: relative;
	width: 1190px;
	height: 600px;
	margin: 0 auto;
}
.erweima{
	background: #FFFFFF;
	right:60px;
	top:20px;
	width: 350px;
	height:550px;
	position: absolute;
}
.shaoma{
	margin:40px 0 0 25px;
	width: 298px;
	height: 18px;
	color: #3c3c3c;
	font-size: 16px;
	line-height: 18px;
	font-weight: 700;
}
.shaoma>input{
	border: 1px solid #999;
}
.iconfont33{
	width:34px;
	height: 36px;
	font-size: 34px;
	float: left;
	color: #ff0036;
	margin-right: 10px;
}
.denglu{
	width: 298px;
	height:18px;
	float: right;
	text-align: right;
	margin: 5px 30px 0 0;
}
.denglu a{
	text-decoration: none;
	width: 48px;
	height: 16px;
	font-size: 12px;
	color:#6c6c6c;
	margin-right: 10px;
	cursor: pointer;
}
.denglu a:hover{
	color: #ff0036;
}
i.saoyisao{
	float: left;
	margin-right: 10px;
	color: #ff0036;
	font-size: 30px;
	line-height: 34px;
}
i.icon-yduidunpaishixin{
	margin:0 10px;
	width: 14px;
	color: #df9c1f;
	font-size: 14px;
	height: 14px;
}
.mimadenglu{
	position: absolute;
	line-height: 28px;
	border: 1px solid #f3d995;	
	color:#df9c1f;
	width: 143px;
	height: 28px;
	font-weight: 400;
	font-size: 12px;
	top:5px;
	right: 63px;
}
.mimadenglu:before{
	top: 5px;
	right: -8px;
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left: solid 8px #f3d995;
}
.mima{
	cursor: pointer;
	right:5px;
	top: 10px;
	width: 46px;
	height: 46px;
	position: absolute;
}
.mima img{
	width: 100%;
	height: 100%;
}
i.diannao{
	font-size: 46px;
	line-height: 46px;
	color:#ff0036;
	cursor: pointer;
}
#foot{
	width: 100%;
	height: 177px;	
}
#footinfo{
	text-align: left;
	margin:30px auto 0;
	width: 1190px;
	height:177px ;
}
.lianjie{
	padding: 5px 0;
	line-height: 25px;	
	width: 1190px;
	height: 35px;
}
.lianjie li{
	font-size: 13px;
	margin-right:10px;
	float: left;
	min-width: 28px;
	height: 35px;
	color: #000;
}
.lianjie>li>a{
	font: 12px;
	color: #000;
	text-decoration: none;
}
.lianjie>li>a:hover{
	text-decoration:underline;
}
.lianjie-foot{	
	float: left;
	width:100%;
	height: 85px;
	line-height: 25px;
	color: #666;
	font-size: 13px;
}
.lianjie-foot a{
	height: 20px;
	margin-right:55px ;
	color: #999999;
	font-size: 13px;
	text-decoration: none;
}
.lianjie-foot a:hover{
	text-decoration: underline;
}
.lianjie-foot span{
	color:#999;
}
.gonggong{
	padding-left: 42px;
	width: 300px;
	height: 40px;
	margin: 20px 25px 0 25px;
}
input:last-child{
	padding-left: 0;
	opacity: .9;
}
input:last-child:hover{
	opacity: 1;
}
#bnt{
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	border: none;
	background: #ff0036;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
	margin-bottom:20px;
}
.wrap{
	z-index: 9;
	text-align: center;
	border: none;
	width: 38px;
	height:38px;
	line-height: 38px;
	background:#ddd;
}
.user{
	position: relative;
}
.pword{
    margin-top: 10px;
	position: relative;
}
.ur{
	top: 79px;
	left: 26px;
	position: absolute;
}
.pw{
	top: 150px;
	left: 26px;
	position: absolute;
}
.pw2{
	top: 221px;
	left: 26px;
	position: absolute;
}
i.icon-suo1{
	font-size: 22px;
	color: #606060;
}
i.icon-user{
	font-size: 22px;
	color: #606060;
}
</style>